<template>
  <div class="common_page">
    <div ref="mainContent" class="main_content">
      <div class="energy_medium">
        <div class="energy_medium_left">
          <div class="energy_medium_left_header">
            <div class="page_info_head">
              <el-image :src="require('@/assets/images/profile.jpg')" style="width:100px;height: 125px;"></el-image>
              <div class="page_info_head_right">
                <div class="page_info_head_name">杨志天</div>
                <div class="page_info_head_post">岗位：焊丝员</div>
              </div>
            </div>
            <div class="page_info_bottom">
              <div v-for="(item, index) in leftTopdata" :key="index" class="page_info_bottom_data">
                <div class="page_info_bottom_data_name">{{ item.name }}</div>
                <div class="page_info_bottom_data_unit">
                  <div class="page_info_bottom_data_num">{{ item.num }}</div>
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
          <div v-loading="charts1" class="energy_medium_left_center">
            <div ref="total_achievement_rate" style="width: 360px;height: 226px"/>
          </div>
          <div v-loading="charts1" class="energy_medium_left_bottom">
            <div ref="total_pass_rate" style="width: 360px;height: 226px"/>
          </div>
        </div>
        <div class="energy_medium_center">
          <div class="energy_medium_center_top">
            <div v-for="(item, index) in 3" :key="index" class="center_top_single">
              <div class="center_top_single_order_num">订单号：D-1000110012XD</div>
              <div class="center_top_single_complete">
                <div class="center_top_single_complete_head">
                  <div>完成情况</div>
                  <div>4200/3200</div>
                </div>
                <el-progress :percentage="50" :stroke-width="12"></el-progress>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">批次号：</div>
                <div class="common_box_value">PC-1000110012AB</div>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">分段号：</div>
                <div class="common_box_value">FD-1000110012EF</div>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">厂区：</div>
                <div class="common_box_value">西厂区</div>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">机种：</div>
                <div class="common_box_value">X0170223110</div>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">规格：</div>
                <div class="common_box_value">焊丝切割机</div>
              </div>
              <div class="center_top_single_common_box">
                <div class="common_box_name">时长：</div>
                <div class="common_box_value">3.6H</div>
              </div>
            </div>
          </div>
          <div v-if="totalPage>0" class="page_wrapper">
            <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :total="totalPage"
                layout="prev, pager, next,sizes, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
          <div class="energy_medium_center_bottom">
            <sysTable
                :columns="centerColumns"
                :data="centerTableData"
                :page-size="searchTemData.pageSize"
                :show-pagination="true"
                :total-page="dataTotal"
                @currentChange="currentChange"
                @sizeChange="sizeChange"
                @selection-change="selectChange"
            >
              <template #operation="scope">
                <el-button class="ope_btn" type="text" @click="showwarehousing(scope.scope.row)">入库</el-button>
              </template>
            </sysTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Ntitle from '../components/Title'
import sysTable from '../components/SysTable'
import {
  getDistributionList,
  getDistributionLeft,
  addDistribution,
  getDistributionRight
} from '../../energy/api/energy/distributionManage';
import {
  configurationSelect,
  getTemplateById,
  getEquipmentById,
  applicatConfiguration
} from '../../energy/api/energy/equipmentEfficiency'
import {kMaxLength} from 'buffer';

export default {
  name: 'energyReport',
  components: {
    Ntitle,
    sysTable
  },
  data() {
    return {
      searchData: {
        deviceName: ''
      },
      leftTreeData: [],
      rightTreeData: [],
      searchTemData: {
        pageSize: 10,
        currPage: 1,
        tempId: []
      },
      centerColumns: [
        {
          label: '分段号',
          prop: 'serialNumber',
          minWidth: '220',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '工艺/工序',
          prop: 'deviceName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '厂区',
          prop: 'buildName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '物料名称',
          prop: 'workshopName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '物料规格',
          prop: 'templateName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '完成时间',
          prop: 'updateTime',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '状态',
          prop: 'updateBy',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
      ],
      dataTotal: 0,
      leftProps: {
        children: 'deviceShortOutputs',
        label: 'deviceName'
      },
      defaultProps: {
        children: 'workshops',
        label: 'templateName'
      },
      centerTableData: [],
      centerCheckData: [],
      delData: '',
      addData: {},
      nowClick: null,
      checkRight: [],
      buttonLoading: false,
      leftTopdata: [
        {
          name: '计划数量：',
          num: 86100,
          unit: '个'
        },
        {
          name: '完工数量',
          num: 6100,
          unit: '个'
        },
        {
          name: '总达成率',
          num: 60,
          unit: '%'
        },
        {
          name: '总通过率',
          num: 86,
          unit: '%'
        },
      ],
      waterStatisticsY: [60, 80],
      waterStatisticsX: ['上月', '本月'],
      charts1: false,
      totalPage: 20,
      currPage: 1,
      pageSize: 3
    }
  },
  watch: {
    searchData: {
      handler: function (val) {
        console.log(val, '33333')
        this.$refs.leftTree.filter(val.deviceName);
      },
      deep: true
    }
  },
  mounted() {
    this.getLeftList()
    // this.getRightList()
    this.initTotalAchievementRate()
    this.initTotalPassRate()
    this.getTableList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.deviceName.indexOf(value) !== -1;
    },
    getTableList(val) {
      const obj = val || []
      getDistributionList(obj).then(res => {
        this.centerTableData = res.data || []
        this.centerTableData.map(item => {
          item.nowType = false
        })
        console.log(this.centerTableData, '3333333222')
      })
    },
    getLeftList() {
      getDistributionLeft(this.searchData).then(res => {
        this.leftTreeData = res.data
      })
    },
    searchTemplete() {
      const arr = this.$refs.leftTree.getCheckedNodes()
      if (arr.length == 0) {
        this.$message.warning(`请选择至少一个设备`);
        return
      }
      this.$refs.rightTree.setCheckedNodes([])
      var temId = []
      arr.map((item, index) => {
        if (item.deviceShortOutputs) {
          arr.splice(index, 1)
        }
      })
      arr.map((item) => {
        temId.push(item.deviceId)
      })
      this.searchTemData.currPage = 1
      this.searchTemData.tempId = temId
      this.getTemplateById(this.searchTemData)

    },
    getTemplateById(val) {
      getTemplateById(val).then(res => {
        this.centerTableData = res.data.list || []
        this.dataTotal = res.data.total
      })
    },
    searchEquipment() {
      const arr = this.$refs.rightTree.getCheckedNodes()
      if (arr.length == 0) {
        this.$message.warning(`请选择至少一个模板`);
        return
      }
      this.$refs.leftTree.setCheckedNodes([])
      console.log(arr, '3333')
      var temId = []
      arr.map((item) => {
        temId.push(item.id)
      })
      this.searchTemData.currPage = 1
      this.searchTemData.tempId = temId
      this.getEquipmentById(this.searchTemData)
    },
    getEquipmentById(val) {
      getEquipmentById(val).then(res => {
        this.centerTableData = res.data.list || []
        this.dataTotal = res.data.total
      })
    },
    applicationTemplate() {
      const arrList = this.$refs.rightTree.getCheckedNodes()
      if (this.centerCheckData.length == 0) {
        this.$message.warning(`请选择至少选择表格中的一条数据`);
        return
      } else if (arrList.length != 1) {
        this.$message.warning(`应用时最多选择一个模板`);
        return
      }
      const obj = {
        tempId: '',
        deviceId: []
      }
      const arr = this.$refs.rightTree.getCheckedNodes()
      arr.map(item => {
        obj.tempId = item.id
      })
      this.centerCheckData.map(item => {
        obj.deviceId.push(item.deviceId)
      })
      applicatConfiguration(obj).then(res => {
        this.searchTemplete()
      })
    },
    selectChange(val) {
      this.centerCheckData = val
    },
    sizeChange(val) {
      this.searchTemData.pageSize = val
      this.getTemplateById(this.searchTemData)
    },
    currentChange(val) {
      this.searchTemData.currPage = val
      this.getTemplateById(this.searchTemData)
    },
    showwarehousing(val) {

    },
    initTotalAchievementRate() {
      const myEcharts = echarts.init(this.$refs.total_achievement_rate);
      myEcharts.setOption({
        color: ['#5e90f6', '#5ed8a7', '#5e7091', '#f5bc2e'],
        backgroundColor: '#fff',
        title: {
          text: `总通过率(%)`,
          left: '0',
          top: '0',
          textStyle: {
            color: '#303133',
            fontSize: '18px'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.waterStatisticsX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: this.waterStatisticsY
          },
        ]
      })
      this.charts1 = false
    },
    initTotalPassRate() {
      const myEcharts = echarts.init(this.$refs.total_pass_rate);
      myEcharts.setOption({
        color: ['#5e90f6', '#5ed8a7', '#5e7091', '#f5bc2e'],
        backgroundColor: '#fff',
        title: {
          text: `总达成率(%)`,
          left: '0',
          top: '0',
          textStyle: {
            color: '#303133',
            fontSize: '18px'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.waterStatisticsX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: this.waterStatisticsY
          },
        ]
      })
      this.charts1 = false
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    }
  }
}
</script>

<style lang="scss" scoped>
.common_page {
  height: 100%;
  width: 100%;
  background: #f3f4f5;
  overflow: auto;
}

.main_content {
  width: 100%;
  height: 100%;
  // background: #fff;
  padding: 20px;

  .main_content_head {
    margin-bottom: 30px;
  }
}

.energy_medium {
  width: 100%;
  height: 100%;
  display: flex;

  .energy_medium_left {
    // width: 300px;
    width: 23%;
    height: 100%;
    // background: #fff;
    .energy_medium_left_header {
      width: 100%;
      height: 383px;
      padding: 20px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;

      .page_info_head {
        display: flex;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 20px;
        margin-bottom: 20px;

        .page_info_head_right {
          margin-left: 20px;

          .page_info_head_name {
            font-size: 26px;
            line-height: 40px;
            color: #000;
            font-weight: bold;
            margin-bottom: 4px;
          }

          .page_info_head_post {
            font-size: 16px;
            line-height: 24px;
            color: #666;
          }
        }
      }

      .page_info_bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .page_info_bottom_data {
          width: 50%;
          margin-bottom: 20px;

          .page_info_bottom_data_name {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            margin-bottom: 4px;
          }

          .page_info_bottom_data_unit {
            display: flex;
            align-items: flex-end;
            font-size: 14px;
            color: #333;
            line-height: 33px;
          }

          .page_info_bottom_data_num {
            font-size: 26px;
            line-height: 40px;
            font-weight: bold;
          }
        }
      }
    }

    .energy_medium_left_center {
      width: 100%;
      height: 266px;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;
      margin: 10px 0;
      padding: 20px;
      box-sizing: border-box;
    }

    .energy_medium_left_bottom {
      width: 100%;
      height: 266px;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
    }
  }

  .energy_medium_center {
    width: 77%;
    // flex: 1;
    margin-left: 10px;
    // background: #fff;
    .energy_medium_center_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .center_top_single {
        width: 33%;
        height: 308px;
        box-sizing: border-box;
        padding: 20px;
        background: #FFFFFF;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;

        .center_top_single_order_num {
          font-size: 16px;
          line-height: 24px;
          color: #333;
          font-weight: bold;
          margin-bottom: 20px;
        }

        .center_top_single_complete {
          width: 100%;
          height: 64px;
          border-radius: 4px;
          background: #f3f4f5;
          box-sizing: border-box;
          padding: 10px;
          margin-bottom: 20px;

          .center_top_single_complete_head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 8px;
          }
        }

        .center_top_single_common_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 4px;
          font-size: 14px;
          color: #333;

          .common_box_name {
            color: #999;
          }
        }

        .center_top_single_common_box:last-of-type {
          margin-bottom: 0px;
        }
      }
    }

    .energy_medium_center_bottom {
      height: 578px;
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}

.ope_btn {
  width: 44px;
  height: 28px;
  line-height: 28px;
  color: #3399FF;
  font-size: 14px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 85, 255, 0.5);
  padding: 0px;
}

::v-deep.el-progress {
  .el-progress-bar {
    margin-right: -40px;
    padding-right: 40px;
  }

  .el-progress__text {
    font-size: 14px !important;
    color: #333;
  }
}

.page_wrapper {
  margin-bottom: 10px;
}

::v-deep.el-pagination {
  padding: 0px;

  .btn-prev, .btn-next {
    width: 28px;
    height: 28px;
    padding: 0px;
    background: #fff;
    border-radius: 4px 4px 4px 4px;
  }

  .el-pager {
    margin: 0 8px;

    .number {
      width: 28px;
      height: 28px;
      padding: 0px;
      margin-right: 8px;
      color: #666;
      font-size: 14px;
      line-height: 28px;
      border-radius: 4px 4px 4px 4px;
      background: #fff;
    }

    .number:last-of-type {
      margin-right: 0px;
    }

    .active {
      background: #3399FF;
      color: #fff;
    }
  }
}
</style>
